<template>
  <div class="container">
    <div class="item">
      <span>客户姓名：</span>
      <span>{{ detail.customerName || "-" }}</span>
    </div>
    <div class="item">
      <span>客户电话：</span>
      <span>{{ detail.customerPhone || "-" }}</span>
    </div>
    <!-- <div class="item">
      <span>客户来源：</span>
      <span>{{ detail.customerSource }}</span>
    </div> -->
    <div class="item">
      <span>产品名称：</span>
      <span>{{ detail.productName || "-" }}</span>
    </div>
    <div class="item">
      <span>理财经理：</span>
      <span>{{ detail.financialManager || "-" }}</span>
    </div>
    <!-- <div class="item">
      <span>身份证号码：</span>
      <span>{{ detail.idcard }}</span>
    </div> -->
    <!-- <div class="item">
      <span>付息账号：</span>
      <span>{{ detail.payInterestAccount }}</span>
    </div> -->
    <div class="item">
      <span>打款金额：</span>
      <span>{{ detail.buyMoney || "-" }}元</span>
    </div>
    <div class="item">
      <span>打款时间：</span>
      <span>{{ detail.payTime || "-" }}</span>
    </div>
    <!-- f<div class="item">
      <span>团队负责人：</span>
      <span>{{ detail.teamOwner }}</span>
    </div> -->
    <div class="item">
      <span>年化收益率(%)：</span>
      <span>{{ detail.yearIncomeRate || "-" }}</span>
    </div>
    <div class="item">
      <span>分期方式：</span>
      <span>{{ detail.calcType || "-" }}</span>
      <span v-if="detail.calcType == '自定义'"
        >（{{ detail.interval || "-" }}个月/期）</span
      >
    </div>
    <div class="item">
      <span>序号：</span>
      <span>{{ detail.sn || "-" }}</span>
    </div>
    <div class="item">
      <span>起息时间：</span>
      <span>{{ detail.valueTime || "-" }}</span>
    </div>
    <div class="item last">
      <span>订单类型：</span>
      <span>{{ OrderType[detail.status] || "-" }}</span>
    </div>
    <div class="fixed" v-if="detail.status === 1">
      <van-button
        type="primary"
        @click="
          () => {
            this.showPop = true;
          }
        "
        >确认订单</van-button
      >
    </div>
    <van-popup v-model="showPop" position="bottom" :style="{ height: '35%' }">
      <div class="title">请确认配送方式</div>
      <van-field name="deliveryType" label="配送方式">
        <template #input>
          <van-radio-group v-model="deliveryType" direction="horizontal">
            <van-radio name="1">邮寄</van-radio>
            <van-radio name="2">理财经理</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-if="deliveryType == 1"
        readonly
        clickable
        v-model="address"
        name="area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <div class="btn">
        <van-button type="primary" @click="submit()">确认</van-button>
      </div>
    </van-popup>
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="areaConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>
ss
<script>
import { getDetail, edit } from "@/api/order";
import { pagination, OrderType } from "@/utils/enumConfig";
import { Popup, Toast } from "vant";
import areaList from "@/assets/js/area";
export default {
  data() {
    return {
      OrderType,
      showPop: false,
      showArea: false,
      areaList,
      deliveryType: "1",
      detail: {},
      province: "",
      city: "",
      district: "",
      address: "",
    };
  },
  async created() {
    let { id } = this.$route.params;
    let detail = await getDetail({ id });
    if (detail) {
      this.detail = detail;
    }
  },
  methods: {
    async submit() {
      if (!this.address && this.deliveryType === 1) {
        Toast("请选择配送地区！");
      }
      let params = {
        ...this.detail,
        status: 2,
        deliveryType: this.deliveryType,
      };
      if (params["deliveryType"] == 1) {
        params = {
          ...params,
          province: this.province,
          city: this.city,
          district: this.district,
        };
      }
      let res = await edit(params);
      if (res.code === 1) {
        Toast("确认订单成功！");
        setTimeout(() => {
          this.$router.go(-1);
        }, 2000);
      }
    },
    areaConfirm(areaArr) {
      this.province = areaArr[0].code;
      this.city = areaArr[1].code;
      this.district = areaArr[2].code;
      this.showArea = false;
      this.address = areaArr[0].name + areaArr[1].name + areaArr[2].name;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #fff;
  height: 100vh;
  padding: 20px 0 50px;
  box-sizing: border-box;
  .item {
    margin-bottom: 20px;
    padding-left: 20px;
  }

  .fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    button {
      width: 100%;
    }
  }
  .title {
    font-size: 13px;
    color: #888;
    margin: 20px;
  }
  .btn {
    width: 90%;
    margin: 20px auto 0;
    button {
      width: 100%;
    }
  }
}
</style>